<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加电影</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
</head>

<body>
    <form class="layui-form layui-form-pane" action="">
        <div style="margin-top:20px;"></div>
        <div class="layui-form-item">
            <label class="layui-form-label">片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日期选择</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
				<label class="layui-form-label">时间范围</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test9" placeholder=" - ">
				</div>
			</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">影片类别</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0" selected="">喜剧</option>
        <option value="1">动作</option>
        <option value="2">科幻</option>
        <option value="3">爱情</option>
        <option value="4">恐怖</option>
		<option value="5">悬疑</option>
		<option value="6">犯罪</option>
		<option value="7">动画</option>
		<option value="8">战争</option>
		<option value="9">记录</option>
      </select>
            </div>
        </div>
         <div class="layui-form-item layui-form-text">
			<label class="layui-form-label">&nbsp;&nbsp;&nbsp;简&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;介</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
	<div class="layui-form-item">
        <label class="layui-form-label" style="margin-right:20px;">上传图片</label>	
		<div style="margin-top:20px;">
				<button type="button" class="layui-btn" id="testList">选择多文件</button>
				<button type="button" class="layui-btn" id="testListAction">开始上传</button>
		</div>
		<div class="layui-upload">
			<div class="layui-upload-list">
				<table class="layui-table">
					<thead>
						<tr><th>文件名</th>
						<th>大小</th>
						<th>状态</th>
						<th>操作</th>
					</tr></thead>
					<tbody id="demoList"></tbody>
				</table>
		    </div>
			
		</div> 
	</div>
		
        <div class="layui-form-item">
            <div class="layui-input-block" style="float:right;margin-right:20px;">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script src="./plugins/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['form', 'layedit', 'laydate','upload'], function() {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;
				$ = layui.jquery
                ,upload = layui.upload;
  

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });
			//时间范围
			laydate.render({
				elem: '#test9'
				,type: 'time'
				,range: true
			});

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function(value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                },
               
            });
            //监听提交
            form.on('submit(demo1)', function(data) {
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });
			
			//多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: '/upload/'
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
        });
        
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        delete files[index]; //删除文件队列已经上传成功的文件
        return;
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
        });
		
		
		
    </script>

</body>

</html>